<template>
<view class="container">
  <view class="post-comment">
    <view class="goods">
      <view class="img">
        <image :src="topic.picUrl"></image>
      </view>
      <view class="info">
        <view class="t">
          <text class="name">{{topic.title}}</text>
        </view>
        <view class="attr">{{topic.subtitle}}</view>
      </view>
    </view>
    <view class="rater">
      <text class="rater-title">评分</text>
      <block v-for="(item, index) in stars" :key="index">
        <image src="/static/static/images/icon_collect_checked.png" @tap="selectRater" :data-star="item" v-if="item < star"></image>
        <image src="/static/static/images/icon_collect.png" @tap="selectRater" :data-star="item" v-else></image>
      </block>
      <text class="rater-desc">{{starText}}</text>
    </view>
    <view class="input-box">
      <textarea class="content" focus="true" @input="bindInputValue" maxlength="140" placeholder="留言经过筛选后，对所有人可见"></textarea>
      <text class="count">{{140 - content.length}}</text>
    </view>

    <view class="weui-uploader">
      <view class="weui-uploader__hd">
        <view class="weui-uploader__title">图片上传</view>
        <view class="weui-uploader__info">{{picUrls.length}}/{{files.length}}</view>
      </view>
      <view class="weui-uploader__bd">
        <view class="weui-uploader__files" id="uploaderFiles">
          <block v-for="(item, index) in files" :key="index">
            <view class="weui-uploader__file" @tap="previewImage" :id="item">
              <image class="weui-uploader__img" :src="item" mode="aspectFill"></image>
            </view>
          </block>
          <view class="weui-uploader__input-box">
            <view class="weui-uploader__input" @tap="chooseImage"></view>
          </view>
        </view>
      </view>
    </view>

    <view class="btns">
      <view class="close" @tap="onClose">取消</view>
      <view class="post" @tap="onPost">发表</view>
    </view>
  </view>
</view>
</template>

<script>
// 上传组件 基于https://github.com/Tencent/weui-wxss/tree/master/src/example/uploader
const app = getApp();
const util = require("../../utils/util.js");
const api = require("../../config/api.js");

export default {
  data() {
    return {
      valueId: 0,
      topic: {},
      content: '',
      stars: [0, 1, 2, 3, 4],
      star: 5,
      starText: '十分满意',
      hasPicture: false,
      picUrls: [],
      files: []
    };
  },

  components: {},
  props: {},
  onLoad: function (options) {
    if (parseInt(options.type) !== 1) {
      return;
    }

    let that = this;
    that.setData({
      valueId: options.valueId
    });
    this.getTopic();
  },
  onReady: function () {},
  onShow: function () {// 页面显示
  },
  onHide: function () {// 页面隐藏
  },
  onUnload: function () {// 页面关闭
  },
  methods: {
    chooseImage: function (e) {
      if (this.files.length >= 5) {
        util.showErrorToast('只能上传五张图片');
        return false;
      }

      let that = this;
      uni.chooseImage({
        count: 1,
        sizeType: ['original', 'compressed'],
        sourceType: ['album', 'camera'],
        success: function (res) {
          that.setData({
            files: that.files.concat(res.tempFilePaths)
          });
          that.upload(res);
        }
      });
    },
    upload: function (res) {
      let that = this;
      const uploadTask = uni.uploadFile({
        url: api.StorageUpload,
        filePath: res.tempFilePaths[0],
        name: 'file',
        success: function (res) {
          let _res = JSON.parse(res.data);

          if (_res.errno === 0) {
            let url = _res.data.url;
            that.picUrls.push(url);
            that.setData({
              hasPicture: true,
              picUrls: that.picUrls
            });
          }
        },
        fail: function (e) {
          uni.showModal({
            title: '错误',
            content: '上传失败',
            showCancel: false
          });
        }
      });
      uploadTask.onProgressUpdate(res => {
        console.log('上传进度', res.progress);
        console.log('已经上传的数据长度', res.totalBytesSent);
        console.log('预期需要上传的数据总长度', res.totalBytesExpectedToSend);
      });
    },
    previewImage: function (e) {
      uni.previewImage({
        current: e.currentTarget.id,
        // 当前显示图片的http链接
        urls: this.files // 需要预览的图片http链接列表

      });
    },
    selectRater: function (e) {
      let star = e.currentTarget.dataset.star + 1;
      let starText;

      if (star == 1) {
        starText = '很差';
      } else if (star == 2) {
        starText = '不太满意';
      } else if (star == 3) {
        starText = '满意';
      } else if (star == 4) {
        starText = '比较满意';
      } else {
        starText = '十分满意';
      }

      this.setData({
        star: star,
        starText: starText
      });
    },
    getTopic: function () {
      let that = this;
      util.request(api.TopicDetail, {
        id: that.valueId
      }).then(function (res) {
        if (res.errno === 0) {
          that.setData({
            topic: res.data.topic
          });
        }
      });
    },
    onClose: function () {
      uni.navigateBack();
    },
    onPost: function () {
      let that = this;

      if (!this.content) {
        util.showErrorToast('请填写评论');
        return false;
      }

      util.request(api.CommentPost, {
        type: 1,
        valueId: that.valueId,
        content: that.content,
        star: that.star,
        hasPicture: that.hasPicture,
        picUrls: that.picUrls
      }, 'POST').then(function (res) {
        if (res.errno === 0) {
          uni.showToast({
            title: '评论成功',
            complete: function () {
              uni.navigateBack();
            }
          });
        }
      });
    },

    bindInputValue(event) {
      let value = event.detail.value; //判断是否超过140个字符

      if (value && value.length > 140) {
        return false;
      }

      this.setData({
        content: event.detail.value
      });
    }

  }
};
</script>
<style>
page, .container {
  height: 100%;
  background: #f4f4f4;
}

.post-comment {
  width: 750rpx;
  height: auto;
  overflow: hidden;
  padding: 30rpx;
  background: #fff;
}

.post-comment .goods {
  display: flex;
  align-items: center;
  height: 199rpx;
  margin-left: 31.25rpx;
}

.post-comment .goods .img {
  height: 145.83rpx;
  width: 145.83rpx;
  background: #f4f4f4;
}

.post-comment .goods .img image {
  height: 145.83rpx;
  width: 145.83rpx;
}

.post-comment .goods .info {
  height: 145.83rpx;
  flex: 1;
  padding-left: 20rpx;
}

.post-comment .goods .name {
  margin-top: 30rpx;
  display: block;
  height: 44rpx;
  line-height: 44rpx;
  color: #333;
  font-size: 30rpx;
}

.post-comment .goods .number {
  display: block;
  height: 37rpx;
  line-height: 37rpx;
  color: #666;
  font-size: 25rpx;
}

.post-comment .goods .status {
  width: 105rpx;
  color: #b4282d;
  font-size: 25rpx;
}

.post-comment .rater {
  display: flex;
  flex-direction: row;
  height: 55rpx;
}

.post-comment .rater .rater-title {
  font-size: 29rpx;
  padding-right: 10rpx;
}

.post-comment .rater image {
  padding-left: 5rpx;
  height: 50rpx;
  width: 50rpx;
}

.post-comment .rater .rater-desc {
  font-size: 29rpx;
  padding-left: 10rpx;
}

.post-comment .input-box {
  height: 337.5rpx;
  width: 690rpx;
  position: relative;
  background: #fff;
}

.post-comment .input-box .content {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  background: #fff;
  font-size: 29rpx;
  border: 5px solid #f4f4f4;
  height: 300rpx;
  width: 650rpx;
  padding: 20rpx;
}

.post-comment .input-box .count {
  position: absolute;
  bottom: 20rpx;
  right: 20rpx;
  display: block;
  height: 30rpx;
  width: 50rpx;
  font-size: 29rpx;
  color: #999;
}

.post-comment .btns {
  height: 108rpx;
}

.post-comment .close {
  float: left;
  height: 108rpx;
  line-height: 108rpx;
  text-align: left;
  color: #666;
  padding: 0 30rpx;
}

.post-comment .post {
  float: right;
  height: 108rpx;
  line-height: 108rpx;
  text-align: right;
  padding: 0 30rpx;
}

.weui-uploader {
  margin-top: 50rpx;
}

.weui-uploader__hd {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  padding-bottom: 10px;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
}

.weui-uploader__title {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  flex: 1;
}

.weui-uploader__info {
  color: #b2b2b2;
}

.weui-uploader__bd {
  margin-bottom: -4px;
  margin-right: -9px;
  overflow: hidden;
}

.weui-uploader__file {
  float: left;
  margin-right: 9px;
  margin-bottom: 9px;
}

.weui-uploader__img {
  display: block;
  width: 79px;
  height: 79px;
}

.weui-uploader__file_status {
  position: relative;
}

.weui-uploader__file_status:before {
  content: " ";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
}

.weui-uploader__file-content {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  color: #fff;
}

.weui-uploader__input-box {
  float: left;
  position: relative;
  margin-right: 9px;
  margin-bottom: 9px;
  width: 77px;
  height: 77px;
  border: 1px solid #d9d9d9;
}

.weui-uploader__input-box:after, .weui-uploader__input-box:before {
  content: " ";
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  background-color: #d9d9d9;
}

.weui-uploader__input-box:before {
  width: 2px;
  height: 39.5px;
}

.weui-uploader__input-box:after {
  width: 39.5px;
  height: 2px;
}

.weui-uploader__input-box:active {
  border-color: #999;
}

.weui-uploader__input-box:active:after, .weui-uploader__input-box:active:before {
  background-color: #999;
}

.weui-uploader__input {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}

</style>